/* 鼠标跟随特效 */
body {
  cursor: url(https://cdn.jsdelivr.net/gh/sviptzk/HexoStaticFile@latest/Hexo/img/default.cur),
    default;
}

a,
img {
  cursor: url(https://cdn.jsdelivr.net/gh/sviptzk/HexoStaticFile@latest/Hexo/img/pointer.cur),
    default;
}

/* 代码块美化---白 */
#article-container figure.highlight,
#article-container pre {
  color: #797878;
  background: #fff
}

#article-container figure.highlight .highlight-tools {
  color: #797878;
  background: #eee
}

#article-container figure.highlight .gutter pre {
  color: #999;
  background: #fff
}

#article-container figure.highlight figcaption a {
  color: #fff !important
}


/* 代码块美化---黑
#article-container figure.highlight,
#article-container pre{
  color:#f8f8f2;
  background:#696969
}
#article-container figure.highlight .highlight-tools{
  background:#3f3f3f;
  color:#fff
}
#article-container figure.highlight .gutter pre{
  color:#d3d3d3;
  background:grey
}
#article-container figure.highlight figcaption a{
  color:#a9a9a9!important
}
 */
/* 页脚footer */
/* 渐变色滚动动画 */
@-webkit-keyframes Gradient {
  0% {
    background-position: 0 50%;
  }

  50% {
    background-position: 100% 50%;
  }

  100% {
    background-position: 0 50%;
  }
}

@keyframes Gradient {
  0% {
    background-position: 0 50%;
  }

  50% {
    background-position: 100% 50%;
  }

  100% {
    background-position: 0 50%;
  }
}

#footer {
  background: -o-linear-gradient(135deg, #ee7752, #ce3e75, #23a6d5, #23d5ab);
  background: linear-gradient(-45deg, #ee7752, #ce3e75, #23a6d5, #23d5ab);
  background-size: 400% 400%;
  -webkit-animation: Gradient 10s ease infinite;
  animation: Gradient 10s ease infinite;
  -o-user-select: none;
  -ms-user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
}

#footer:before {
  background-color: rgba(0, 0, 0, 0);
}

.fa-qq {
  color: #10a4ff
}

.fa-weixin {
  color: #00bf03
}

.fa-alipay {
  color: #4890f7
}

.fa-rss {
  color: #d68650
}

.fa-heart {
  color: red
}

body {
  cursor: url(https://cdn.jsdelivr.net/gh/sviptzk/HexoStaticFile@latest/Hexo/img/default.cur), default
}

.hide-block>.hide-button.open,
.hide-inline>.hide-button.open {
  display: block
}

a,
button,
img {
  cursor: url(https://cdn.jsdelivr.net/gh/sviptzk/HexoStaticFile@latest/Hexo/img/pointer.cur), default
}

video {
  width: 100%
}

.card-info-avatar:hover {
  background: url(https://ae01.alicdn.com/kf/H3342af90d24b4d62b9bbfec9688ccc25M.gif)
}

audio {
  outline: 0
}

#web_bg {
  background: -o-linear-gradient(0deg, rgba(247, 149, 51, .1) 0, rgba(243, 112, 85, .1) 15%, rgba(239, 78, 123, .1) 30%, rgba(161, 102, 171, .1) 44%, rgba(80, 115, 184, .1) 58%, rgba(16, 152, 173, .1) 72%, rgba(7, 179, 155, .1) 86%, rgba(109, 186, 130, .1) 100%);
  background: -o-linear-gradient(left, rgba(247, 149, 51, .1) 0, rgba(243, 112, 85, .1) 15%, rgba(239, 78, 123, .1) 30%, rgba(161, 102, 171, .1) 44%, rgba(80, 115, 184, .1) 58%, rgba(16, 152, 173, .1) 72%, rgba(7, 179, 155, .1) 86%, rgba(109, 186, 130, .1) 100%);
  background: -webkit-gradient(linear, left top, right top, color-stop(0, rgba(247, 149, 51, .1)), color-stop(15%, rgba(243, 112, 85, .1)), color-stop(30%, rgba(239, 78, 123, .1)), color-stop(44%, rgba(161, 102, 171, .1)), color-stop(58%, rgba(80, 115, 184, .1)), color-stop(72%, rgba(16, 152, 173, .1)), color-stop(86%, rgba(7, 179, 155, .1)), to(rgba(109, 186, 130, .1)));
  background: linear-gradient(90deg, rgba(247, 149, 51, .1) 0, rgba(243, 112, 85, .1) 15%, rgba(239, 78, 123, .1) 30%, rgba(161, 102, 171, .1) 44%, rgba(80, 115, 184, .1) 58%, rgba(16, 152, 173, .1) 72%, rgba(7, 179, 155, .1) 86%, rgba(109, 186, 130, .1) 100%)
}

#content-inner {
  --light_bg_color: rgb(255, 255, 255, 1);
  --dark_bg_color: rgba(18, 18, 18, 0.8)
}

#aside_content .card-widget,
#recent-posts>.recent-post-item,
.layout_page>div:first-child:not(.recent-posts),
.layout_post>#page,
.layout_post>#post,
.read-mode .layout_post>#post {
  background: var(--light_bg_color)
}

[data-theme=dark] #aside_content .card-widget,
[data-theme=dark] #recent-posts>.recent-post-item,
[data-theme=dark] .layout_page>div:first-child:not(.recent-posts),
[data-theme=dark] .layout_post>#page,
[data-theme=dark] .layout_post>#post,
[data-theme=dark].read-mode .layout_post>#post {
  background: var(--dark_bg_color)
}

span.inline-tag {
  display: inline;
  padding: .2em .6em .3em;
  font-size: 90%;
  font-weight: 400;
  line-height: 1;
  color: #fff;
  text-align: center;
  white-space: nowrap;
  vertical-align: baseline;
  border-radius: .1rem;
  border-radius: 6px;
  background-color: var(--Color)
}

.font5 {
  display: block;
  width: 100%;
  text-align: left;
  font-weight: 500;
  line-height: 32px;
  border-left-color: #767676;
  background: #f6f6f6
}

p.red,
span.red {
  --Color: rgb(233, 30, 100);
  --ColorA: rgba(233, 30, 100, 0.2)
}

p.green,
span.green {
  --Color: rgb(139, 195, 74);
  --ColorA: rgba(139, 195, 74, 0.2)
}

p.blue,
span.blue {
  --Color: rgb(3, 169, 244);
  --ColorA: rgba(3, 169, 244, 0.2)
}

p.yellow,
span.yellow {
  --Color: rgb(255, 193, 7);
  --ColorA: rgba(255, 193, 7, 0.2)
}

p.grey,
span.grey {
  --Color: rgb(76, 76, 76);
  --ColorA: rgba(76, 76, 76, 0.2)
}

p.div-border {
  padding: 10px;
  border: 1px solid var(--Color, #333);
  border-radius: .4rem;
  background-color: var(--ColorA, transparent)
}

p.left {
  border-left-width: 5px;
  border-left-color: var(--Color)
}

p.bottom {
  border-bottom-width: 5px;
  border-bottom-color: var(--Color)
}

p.right {
  border-right-width: 5px;
  border-right-color: var(--Color)
}

p.top {
  border-top-width: 5px;
  border-top-color: var(--Color)
}

.layout_post img {
  display: inline-block
}

.imgList li::before {
  content: none !important
}

::-webkit-scrollbar {
  width: 8px;
  height: 8px
}

::-webkit-scrollbar-track {
  background-color: rgba(73, 177, 245, .2);
  border-radius: 2em
}

::-webkit-scrollbar-thumb {
  background-color: #49b1f5;
  background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, .4) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .4) 50%, rgba(255, 255, 255, .4) 75%, transparent 75%, transparent);
  border-radius: 2em
}

::-webkit-scrollbar-corner {
  background-color: transparent
}

::-moz-selection {
  color: #fff;
  background-color: #49b1f5
}


[data-theme=dark] .checkbox,
[data-theme=dark] .snote,
[data-theme=dark] .tip,
[data-theme=dark] audio,
[data-theme=dark] details,
[data-theme=dark] div.btns,
[data-theme=dark] span.inline-tag {
  -webkit-filter: brightness(.7);
          filter: brightness(.7)
}

[data-theme=dark] .snote,
[data-theme=dark] .tip {
  color: #4c4948
}

[data-theme=dark] span.inline-tag {
  color: rgba(255, 255, 255, .8)
}

[data-theme=dark] .hide-toggle {
  border: 1px solid rgba(85, 85, 85, .2)
}

#article-container .tabs {
  background: #fff
}

[data-theme=dark] #article-container .tabs {
  background: 0 0
}

#post a.link-card {
  text-decoration: none;
  margin: .2rem auto;
  background: var(--tab-botton-bg);
  display: -ms-inline-flexbox;
  display: -webkit-inline-box;
  display: -webkit-inline-flex;
  display: inline-flex;
  -ms-flex-align: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
          align-items: center;
  cursor: pointer;
  text-align: left;
  font-size: .575rem;
  min-width: 200px;
  max-width: 361px;
  color: var(--tab-botton-color);
  border-radius: 8px
}

@media screen and (max-width:425px) {
  #post a.link-card {
    max-width: 100%
  }
}

@media screen and (max-width:375px) {
  #post a.link-card {
    width: 100%
  }
}

#post a.link-card:hover {
  -webkit-box-shadow: 0 4px 8px 0 rgba(0, 0, 0, .1);
          box-shadow: 0 4px 8px 0 rgba(0, 0, 0, .1)
}

#post a.link-card div.left,
#post a.link-card div.right {
  pointer-events: none
}

#post a.link-card div.left {
  width: 48px;
  height: 48px;
  margin: 12px;
  overflow: hidden;
  -ms-flex-negative: 0;
  -webkit-flex-shrink: 0;
          flex-shrink: 0;
  position: relative
}

#post a.link-card div.left i {
  font-size: 32px;
  line-height: 48px;
  margin-left: 4px
}

#post a.link-card div.left img {
  display: block;
  position: absolute;
  border-radius: 8px/4;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%)
}

#post a.link-card div.right {
  overflow: hidden;
  margin-right: 12px
}

#post a.link-card p {
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  -o-text-overflow: ellipsis;
     text-overflow: ellipsis
}

#post a.link-card p.text {
  font-weight: 700
}

#post a.link-card p.url {
  -ms-flex-negative: 0;
  -webkit-flex-shrink: 0;
          flex-shrink: 0;
  color: var(--search-input-color);
  font-size: .7125rem
}

p.p.h2,
span.p.h2 {
  font-size: 1.375rem;
  color: var(--font-color);
  padding-top: .8rem;
  border-bottom: 1px solid var(--hr-border)
}

div.timenode {
  position: relative
}

div.timenode:after,
div.timenode:before {
  content: "";
  z-index: 1;
  position: absolute;
  background: rgba(68, 215, 182, .5);
  width: 2px;
  left: 7px
}

div.timenode:before {
  top: 0;
  height: 6px
}

div.timenode:after {
  top: 26px;
  height: -webkit-calc(100% - 26px);
  height: calc(100% - 26px)
}

div.timenode:last-child:after {
  height: -webkit-calc(100% - 26px - 16px);
  height: calc(100% - 26px - 16px);
  border-bottom-left-radius: 2px;
  border-bottom-right-radius: 2px
}

div.timenode .meta {
  position: relative;
  color: var(--tab-botton-color);
  font-size: .375rem;
  line-height: 32px;
  height: 32px;
  left: 27px
}

div.timenode .meta:after,
div.timenode .meta:before {
  content: "";
  position: absolute;
  top: 8px;
  z-index: 2;
  left: -27px
}

div.timenode .meta:before {
  background: rgba(68, 215, 182, .5);
  width: 16px;
  height: 16px;
  border-radius: 8px
}

div.timenode .meta:after {
  background: #44d7b6;
  margin-left: 2px;
  margin-top: 2px;
  width: 12px;
  height: 12px;
  border-radius: 6px;
  -webkit-transform: scale(.5);
      -ms-transform: scale(.5);
          transform: scale(.5);
  transition: all .28s ease;
  -moz-transition: all .28s ease;
  -webkit-transition: all .28s ease;
  -o-transition: all .28s ease
}

div.timenode .meta p {
  font-weight: 700;
  margin: 0 0 0 24px
}

div.timenode .body {
  margin: 4px 0 16px 24px;
  padding: 16px;
  border-radius: 8px;
  background: var(--blockquote-bg)
}

div.timenode .body p:first-child {
  margin-top: 0
}

div.timenode .body p:last-child {
  margin-bottom: 0
}

div.timenode:hover .meta {
  color: var(--text-highlight-color)
}

div.timenode:hover .meta:before {
  background: rgba(255, 87, 34, .5)
}

div.timenode:hover .meta:after {
  background: #ff5722;
  -webkit-transform: scale(1);
      -ms-transform: scale(1);
          transform: scale(1)
}

#post del,
#post s {
  color: #999;
  -webkit-text-decoration-color: #999;
  -moz-text-decoration-color: #999;
       text-decoration-color: #999
}

#post u {
  color: #444;
  text-decoration: none;
  border-bottom: 1px solid #fe5f58
}

#post emp {
  color: #444;
  border-bottom: 4px dotted #fe5f58
}

#post wavy {
  color: #444;
  -webkit-text-decoration-style: wavy;
  -moz-text-decoration-style: wavy;
       text-decoration-style: wavy;
  -webkit-text-decoration-line: underline;
  -moz-text-decoration-line: underline;
       text-decoration-line: underline;
  -webkit-text-decoration-color: #fe5f58;
  -moz-text-decoration-color: #fe5f58;
       text-decoration-color: #fe5f58
}

#post psw {
  color: transparent;
  background: #7f7f7f;
  border-radius: 2px;
  transition: all .28s ease;
  -moz-transition: all .28s ease;
  -webkit-transition: all .28s ease;
  -o-transition: all .28s ease
}

#post psw:hover {
  color: #555;
  background: 0 0
}

#post kbd {
  color: var(--tab-botton-color);
  border-radius: 4px;
  border: 1px solid #d2d2d2;
  border-bottom-width: 2px;
  background: var(--tab-button-active-bg);
  padding-left: 4px;
  padding-right: 4px
}

div.btns {
  margin: 0 -8px;
  display: -ms-flexbox;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -ms-flex-wrap: wrap;
  -webkit-flex-wrap: wrap;
          flex-wrap: wrap;
  -ms-flex-align: start;
  -webkit-box-align: start;
  -webkit-align-items: flex-start;
          align-items: flex-start;
  overflow: visible
}

[data-theme=dark] div.btns a {
  background: 0 0
}

div.btns,
div.btns a,
div.btns p {
  font-size: .8125rem;
  color: #555
}

div.btns b {
  font-size: .875rem
}

.btns img {
  margin: 0 !important
}

div.btns.wide>a {
  padding-left: 32px;
  padding-right: 32px
}

div.btns.fill>a {
  -ms-flex-positive: 1;
  -webkit-box-flex: 1;
  -webkit-flex-grow: 1;
          flex-grow: 1;
  width: auto
}

div.btns.around {
  -ms-flex-pack: distribute;
  -webkit-justify-content: space-around;
          justify-content: space-around
}

div.btns.center {
  -ms-flex-pack: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
          justify-content: center
}

div.btns.grid2>a {
  width: -webkit-calc(100% / 2 - 16px);
  width: calc(100% / 2 - 16px)
}

@media screen and (max-width:1024px) {
  div.btns.grid2>a {
    width: -webkit-calc(100% / 2 - 16px);
    width: calc(100% / 2 - 16px)
  }
}

@media screen and (max-width:768px) {
  div.btns.grid2>a {
    width: -webkit-calc(100% / 2 - 16px);
    width: calc(100% / 2 - 16px)
  }
}

@media screen and (max-width:500px) {
  div.btns.grid2>a {
    width: -webkit-calc(100% / 1 - 16px);
    width: calc(100% / 1 - 16px)
  }
}

div.btns.grid3>a {
  width: -webkit-calc(100% / 3 - 16px);
  width: calc(100% / 3 - 16px)
}

@media screen and (max-width:1024px) {
  div.btns.grid3>a {
    width: -webkit-calc(100% / 3 - 16px);
    width: calc(100% / 3 - 16px)
  }
}

@media screen and (max-width:768px) {
  div.btns.grid3>a {
    width: -webkit-calc(100% / 3 - 16px);
    width: calc(100% / 3 - 16px)
  }
}

@media screen and (max-width:500px) {
  div.btns.grid3>a {
    width: -webkit-calc(100% / 1 - 16px);
    width: calc(100% / 1 - 16px)
  }
}

div.btns.grid4>a {
  width: -webkit-calc(100% / 4 - 16px);
  width: calc(100% / 4 - 16px)
}

@media screen and (max-width:1024px) {
  div.btns.grid4>a {
    width: -webkit-calc(100% / 3 - 16px);
    width: calc(100% / 3 - 16px)
  }
}

@media screen and (max-width:768px) {
  div.btns.grid4>a {
    width: -webkit-calc(100% / 3 - 16px);
    width: calc(100% / 3 - 16px)
  }
}

@media screen and (max-width:500px) {
  div.btns.grid4>a {
    width: -webkit-calc(100% / 2 - 16px);
    width: calc(100% / 2 - 16px)
  }
}

div.btns.grid5>a {
  width: -webkit-calc(100% / 5 - 16px);
  width: calc(100% / 5 - 16px)
}

@media screen and (max-width:1024px) {
  div.btns.grid5>a {
    width: -webkit-calc(100% / 4 - 16px);
    width: calc(100% / 4 - 16px)
  }
}

@media screen and (max-width:768px) {
  div.btns.grid5>a {
    width: -webkit-calc(100% / 3 - 16px);
    width: calc(100% / 3 - 16px)
  }
}

@media screen and (max-width:500px) {
  div.btns.grid5>a {
    width: -webkit-calc(100% / 2 - 16px);
    width: calc(100% / 2 - 16px)
  }
}

div.btns a {
  transition: all .28s ease;
  -moz-transition: all .28s ease;
  -webkit-transition: all .28s ease;
  -o-transition: all .28s ease;
  margin: 8px;
  margin-top: -webkit-calc(1.25 * 16px + 32px);
  margin-top: calc(1.25 * 16px + 32px);
  min-width: 120px;
  font-weight: 700;
  display: -ms-flexbox;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -ms-flex-pack: start;
  -webkit-box-pack: start;
  -webkit-justify-content: flex-start;
          justify-content: flex-start;
  -ms-flex-line-pack: center;
  -webkit-align-content: center;
          align-content: center;
  -ms-flex-align: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
          align-items: center;
  -ms-flex-direction: column;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
          flex-direction: column;
  padding: 8px;
  text-align: center;
  background: #f6f6f6;
  border-radius: 4px
}

div.btns a>i:first-child,
div.btns a>img:first-child {
  transition: all .28s ease;
  -moz-transition: all .28s ease;
  -webkit-transition: all .28s ease;
  -o-transition: all .28s ease;
  height: 64px;
  width: 64px;
  -webkit-box-shadow: 0 1px 2px 0 rgba(0, 0, 0, .1);
          box-shadow: 0 1px 2px 0 rgba(0, 0, 0, .1);
  margin: 16px 8px 4px 8px;
  margin-top: -webkit-calc(-1.25 * 16px - 32px);
  margin-top: calc(-1.25 * 16px - 32px);
  border: 2px solid #fff;
  background: #fff;
  line-height: 60px;
  font-size: 28px
}

div.btns a>i:first-child.auto,
div.btns a>img:first-child.auto {
  width: auto
}

div.btns a>i:first-child {
  color: #fff;
  background: #2196f3
}

div.btns a b,
div.btns a p {
  margin: .25em;
  font-weight: 400;
  line-height: 1.25;
  word-wrap: break-word
}

div.btns a b {
  font-weight: 700;
  line-height: 1.3
}

div.btns a img {
  margin: .4em auto
}

div.btns a:not([href]) {
  cursor: default;
  color: inherit
}

div.btns a[href]:hover {
  background: rgba(255, 87, 34, .15)
}

div.btns a[href]:hover,
div.btns a[href]:hover b {
  color: #ff5722
}

div.btns a[href]:hover>i:first-child,
div.btns a[href]:hover>img:first-child {
  -webkit-transform: scale(1.1) translateY(-8px);
      -ms-transform: scale(1.1) translateY(-8px);
          transform: scale(1.1) translateY(-8px);
  -webkit-box-shadow: 0 4px 8px 0 rgba(0, 0, 0, .1);
          box-shadow: 0 4px 8px 0 rgba(0, 0, 0, .1)
}

div.btns a[href]:hover>i:first-child {
  background: #ff5722
}

div.btns.circle a>i:first-child,
div.btns.circle a>img:first-child {
  border-radius: 32px
}

div.btns.rounded a>i:first-child,
div.btns.rounded a>img:first-child {
  border-radius: 16px
}

.checkbox {
  display: -ms-flexbox;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -ms-flex-align: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
          align-items: center
}

.checkbox input {
  -webkit-appearance: none;
  -moz-appearance: none;
  -ms-appearance: none;
  -o-appearance: none;
  appearance: none;
  position: relative;
  height: 16px;
  width: 16px;
  -webkit-transition: all .15s ease-out 0s;
  -o-transition: all .15s ease-out 0s;
  transition: all .15s ease-out 0s;
  cursor: pointer;
  display: inline-block;
  outline: 0;
  border-radius: 2px;
  -ms-flex-negative: 0;
  -webkit-flex-shrink: 0;
          flex-shrink: 0;
  margin-right: 8px
}

.checkbox input[type=checkbox]:after,
.checkbox input[type=checkbox]:before {
  position: absolute;
  content: "";
  background: #fff
}

.checkbox input[type=checkbox]:before {
  left: 1px;
  top: 5px;
  width: 0;
  height: 2px;
  -webkit-transition: all .2s ease-in;
  -o-transition: all .2s ease-in;
  transition: all .2s ease-in;
  transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -o-transform: rotate(45deg)
}

.checkbox input[type=checkbox]:after {
  right: 7px;
  bottom: 3px;
  width: 2px;
  height: 0;
  -webkit-transition: all .2s ease-out;
  -o-transition: all .2s ease-out;
  transition: all .2s ease-out;
  transform: rotate(40deg);
  -webkit-transform: rotate(40deg);
  -moz-transform: rotate(40deg);
  -ms-transform: rotate(40deg);
  -o-transform: rotate(40deg);
  -webkit-transition-delay: .25s;
       -o-transition-delay: .25s;
          transition-delay: .25s
}

.checkbox input[type=checkbox]:checked:before {
  left: 0;
  top: 7px;
  width: 6px;
  height: 2px
}

.checkbox input[type=checkbox]:checked:after {
  right: 3px;
  bottom: 1px;
  width: 2px;
  height: 10px
}

.checkbox.minus input[type=checkbox]:before {
  -webkit-transform: rotate(0);
      -ms-transform: rotate(0);
          transform: rotate(0);
  left: 1px;
  top: 5px;
  width: 0;
  height: 2px
}

.checkbox.minus input[type=checkbox]:after {
  -webkit-transform: rotate(0);
      -ms-transform: rotate(0);
          transform: rotate(0);
  left: 1px;
  top: 5px;
  width: 0;
  height: 2px
}

.checkbox.minus input[type=checkbox]:checked:before {
  left: 1px;
  top: 5px;
  width: 10px;
  height: 2px
}

.checkbox.minus input[type=checkbox]:checked:after {
  left: 1px;
  top: 5px;
  width: 10px;
  height: 2px
}

.checkbox.plus input[type=checkbox]:before {
  -webkit-transform: rotate(0);
      -ms-transform: rotate(0);
          transform: rotate(0);
  left: 1px;
  top: 5px;
  width: 0;
  height: 2px
}

.checkbox.plus input[type=checkbox]:after {
  -webkit-transform: rotate(0);
      -ms-transform: rotate(0);
          transform: rotate(0);
  left: 5px;
  top: 1px;
  width: 2px;
  height: 0
}

.checkbox.plus input[type=checkbox]:checked:before {
  left: 1px;
  top: 5px;
  width: 10px;
  height: 2px
}

.checkbox.plus input[type=checkbox]:checked:after {
  left: 5px;
  top: 1px;
  width: 2px;
  height: 10px
}

.checkbox.times input[type=checkbox]:before {
  -webkit-transform: rotate(45deg);
      -ms-transform: rotate(45deg);
          transform: rotate(45deg);
  left: 3px;
  top: 1px;
  width: 0;
  height: 2px
}

.checkbox.times input[type=checkbox]:after {
  -webkit-transform: rotate(135deg);
      -ms-transform: rotate(135deg);
          transform: rotate(135deg);
  right: 3px;
  top: 1px;
  width: 0;
  height: 2px
}

.checkbox.times input[type=checkbox]:checked:before {
  left: 1px;
  top: 5px;
  width: 10px;
  height: 2px
}

.checkbox.times input[type=checkbox]:checked:after {
  right: 1px;
  top: 5px;
  width: 10px;
  height: 2px
}

.checkbox input[type=radio] {
  border-radius: 50%
}

.checkbox input[type=radio]:before {
  content: "";
  display: block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin: 2px;
  -webkit-transform: scale(0);
      -ms-transform: scale(0);
          transform: scale(0);
  -webkit-transition: all .25s ease-out;
  -o-transition: all .25s ease-out;
  transition: all .25s ease-out
}

.checkbox input[type=radio]:checked:before {
  -webkit-transform: scale(1);
      -ms-transform: scale(1);
          transform: scale(1)
}

.checkbox input {
  border: 2px solid #2196f3
}

.checkbox input[type=checkbox]:checked {
  background: #2196f3
}

.checkbox input[type=radio]:checked:before {
  background: #2196f3
}

.checkbox.red input {
  border-color: #fe5f58
}

.checkbox.red input[type=checkbox]:checked {
  background: #fe5f58
}

.checkbox.red input[type=radio]:checked:before {
  background: #fe5f58
}

.checkbox.green input {
  border-color: #3dc550
}

.checkbox.green input[type=checkbox]:checked {
  background: #3dc550
}

.checkbox.green input[type=radio]:checked:before {
  background: #3dc550
}

.checkbox.yellow input {
  border-color: #ffbd2b
}

.checkbox.yellow input[type=checkbox]:checked {
  background: #ffbd2b
}

.checkbox.yellow input[type=radio]:checked:before {
  background: #ffbd2b
}

.checkbox.cyan input {
  border-color: #1bcdfc
}

.checkbox.cyan input[type=checkbox]:checked {
  background: #1bcdfc
}

.checkbox.cyan input[type=radio]:checked:before {
  background: #1bcdfc
}

.checkbox.blue input {
  border-color: #2196f3
}

.checkbox.blue input[type=checkbox]:checked {
  background: #2196f3
}

.checkbox.blue input[type=radio]:checked:before {
  background: #2196f3
}

.checkbox p {
  display: inline-block;
  margin-top: 2px !important;
  margin-bottom: 0 !important
}

div.tabs details {
  margin-top: .5rem;
  margin-bottom: .5rem
}

details {
  display: block;
  padding: 16px;
  margin: .5rem 0;
  border-radius: 4px;
  font-size: .7375rem;
  transition: all .28s ease;
  -moz-transition: all .28s ease;
  -webkit-transition: all .28s ease;
  -o-transition: all .28s ease;
  border: 1px solid #f6f6f6;
  line-height: 1.3
}

details summary {
  cursor: pointer;
  padding: 16px;
  margin: -16px;
  border-radius: 4px;
  color: rgba(85, 85, 85, .7);
  font-size: .775rem;
  font-weight: 700;
  position: relative
}

details summary>h1,
details summary>h2,
details summary>h3,
details summary>h4,
details summary>h5,
details summary>h6,
details summary>p {
  display: inline;
  border-bottom: none !important
}

details summary:hover {
  color: #555
}

details summary:hover:after {
  position: absolute;
  content: "+";
  text-align: center;
  top: 50%;
  -webkit-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
          transform: translateY(-50%);
  right: 16px
}

details>summary {
  background: #f6f6f6
}

details[blue] {
  border-color: #e8f4fd
}

details[blue]>summary {
  background: #e8f4fd
}

details[cyan] {
  border-color: #e8fafe
}

details[cyan]>summary {
  background: #e8fafe
}

details[green] {
  border-color: #ebf9ed
}

details[green]>summary {
  background: #ebf9ed
}

details[yellow] {
  border-color: #fff8e9
}

details[yellow]>summary {
  background: #fff8e9
}

details[red] {
  border-color: #feefee
}

details[red]>summary {
  background: #feefee
}

details[open] {
  border-color: rgba(85, 85, 85, .2)
}

details[open]>summary {
  border-bottom: 1px solid rgba(85, 85, 85, .2);
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0
}

details[open][blue] {
  border-color: rgba(33, 150, 243, .3)
}

details[open][blue]>summary {
  border-bottom-color: rgba(33, 150, 243, .3)
}

details[open][cyan] {
  border-color: rgba(27, 205, 252, .3)
}

details[open][cyan]>summary {
  border-bottom-color: rgba(27, 205, 252, .3)
}

details[open][green] {
  border-color: rgba(61, 197, 80, .3)
}

details[open][green]>summary {
  border-bottom-color: rgba(61, 197, 80, .3)
}

details[open][yellow] {
  border-color: rgba(255, 189, 43, .3)
}

details[open][yellow]>summary {
  border-bottom-color: rgba(255, 189, 43, .3)
}

details[open][red] {
  border-color: rgba(254, 95, 88, .3)
}

details[open][red]>summary {
  border-bottom-color: rgba(254, 95, 88, .3)
}

details[open]>summary {
  color: #555;
  margin-bottom: 0
}

details[open]>summary:hover:after {
  content: "-"
}

details[open]>div.content {
  padding: 16px;
  margin: -16px;
  margin-top: 0
}

details[open]>div.content>.fancybox:first-child,
details[open]>div.content>.highlight:first-child,
details[open]>div.content>.snote:first-child,
details[open]>div.content>.tabs:first-child,
details[open]>div.content>ol:first-child,
details[open]>div.content>p:first-child,
details[open]>div.content>ul:first-child {
  margin-top: 0
}

details[open]>div.content>.fancybox:last-child,
details[open]>div.content>.highlight:last-child,
details[open]>div.content>.snote:last-child,
details[open]>div.content>.tabs:last-child,
details[open]>div.content>ol:last-child,
details[open]>div.content>p:last-child,
details[open]>div.content>ul:last-child {
  margin-bottom: 0
}

div.gallery {
  margin: .5rem 0;
  overflow: hidden
}

div.gallery>.fancybox,
div.gallery>p>.fancybox {
  padding: 0;
  position: relative
}

div.gallery>.fancybox .image-caption,
div.gallery>p>.fancybox .image-caption {
  opacity: 0;
  -webkit-transform: translateY(100%);
      -ms-transform: translateY(100%);
          transform: translateY(100%);
  -webkit-transition: all .3s ease;
  -o-transition: all .3s ease;
  transition: all .3s ease;
  pointer-events: none;
  position: absolute;
  width: 100%;
  bottom: 0;
  text-align: center;
  background: rgba(0, 0, 0, .3);
  color: #fff
}

div.gallery>.fancybox .image-caption:empty,
div.gallery>p>.fancybox .image-caption:empty {
  display: none
}

div.gallery>.fancybox:hover .image-caption,
div.gallery>p>.fancybox:hover .image-caption {
  opacity: 1;
  -webkit-transform: translateY(0);
      -ms-transform: translateY(0);
          transform: translateY(0)
}

div.gallery,
div.gallery>p {
  display: -ms-flexbox;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -ms-flex-pack: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
          justify-content: center;
  -ms-flex-align: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
          align-items: center;
  -ms-flex-wrap: nowrap;
  -webkit-flex-wrap: nowrap;
          flex-wrap: nowrap;
  padding: 0 !important;
  -ms-flex-align: stretch;
  -webkit-box-align: stretch;
  -webkit-align-items: stretch;
          align-items: stretch
}

div.gallery[col]>p {
  -ms-flex-wrap: wrap;
  -webkit-flex-wrap: wrap;
          flex-wrap: wrap;
  -ms-flex-pack: start;
  -webkit-box-pack: start;
  -webkit-justify-content: flex-start;
          justify-content: flex-start
}

div.gallery[col="2"]>p>.fancybox {
  width: -webkit-calc(50% - 2 * 1px);
  width: calc(50% - 2 * 1px)
}

div.gallery[col="3"]>p>.fancybox {
  width: -webkit-calc(33.33% - 2 * 1px);
  width: calc(33.33% - 2 * 1px)
}

div.gallery[col="4"]>p>.fancybox {
  width: -webkit-calc(25% - 2 * 1px);
  width: calc(25% - 2 * 1px)
}

div.gallery[col="5"]>p>.fancybox {
  width: -webkit-calc(20% - 2 * 1px);
  width: calc(20% - 2 * 1px)
}

div.gallery[col="6"]>p>.fancybox {
  width: -webkit-calc(16.66% - 2 * 1px);
  width: calc(16.66% - 2 * 1px)
}

div.gallery[col="7"]>p>.fancybox {
  width: -webkit-calc(14.2857% - 2 * 1px);
  width: calc(14.2857% - 2 * 1px)
}

div.gallery[col="8"]>p>.fancybox {
  width: -webkit-calc(12.5% - 2 * 1px);
  width: calc(12.5% - 2 * 1px)
}

div.gallery>p {
  margin: 0
}

div.gallery.left,
div.gallery.left>p {
  -ms-flex-pack: start;
  -webkit-box-pack: start;
  -webkit-justify-content: flex-start;
          justify-content: flex-start
}

div.gallery.center,
div.gallery.center>p {
  -ms-flex-pack: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
          justify-content: center
}

div.gallery.right,
div.gallery.right>p {
  -ms-flex-pack: end;
  -webkit-box-pack: end;
  -webkit-justify-content: flex-end;
          justify-content: flex-end
}

div.gallery.stretch,
div.gallery.stretch>p {
  -ms-flex-align: stretch;
  -webkit-box-align: stretch;
  -webkit-align-items: stretch;
          align-items: stretch
}

div.gallery.stretch img,
div.gallery.stretch>p img {
  -webkit-transform: scale(1.5);
      -ms-transform: scale(1.5);
          transform: scale(1.5)
}

.fancybox-container .fancybox-stage {
  cursor: -webkit-zoom-out;
  cursor: zoom-out
}

.fancybox {
  display: -ms-flexbox;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -ms-flex-direction: column;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
          flex-direction: column;
  -ms-flex-pack: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
          justify-content: center;
  -ms-flex-align: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
          align-items: center;
  -ms-flex-wrap: nowrap;
  -webkit-flex-wrap: nowrap;
          flex-wrap: nowrap;
  padding: 0 !important;
  overflow: hidden;
  border-radius: 2px
}

@media screen and (max-width:500px) {
  .fancybox {
    border-radius: 1px
  }
}

.fancybox a {
  line-height: 0;
  margin: 0;
  -ms-flex-align: stretch;
  -webkit-box-align: stretch;
  -webkit-align-items: stretch;
          align-items: stretch;
  cursor: -webkit-zoom-in;
  cursor: zoom-in
}

.fancybox .gallery {
  overflow: hidden
}

.fancybox .image-caption {
  font-size: .7125rem;
  padding-top: .4rem;
  padding-bottom: .4rem;
  color: rgba(85, 85, 85, .65)
}

#article-container .fancybox img {
  margin: 0
}

.snote {
  position: relative;
  margin: 0 0 1rem;
  padding: 15px;
  border: initial;
  border-left: 5px solid #eee;
  background-color: #f9f9f9;
  border-radius: 3px
}

.snote h2,
.snote h3,
.snote h4,
.snote h5,
.snote h6 {
  margin-top: 3px;
  margin-bottom: 0;
  padding-top: 0 !important;
  border-bottom: initial
}

.snote blockquote:first-child,
.snote img:first-child,
.snote ol:first-child,
.snote p:first-child,
.snote pre:first-child,
.snote table:first-child,
.snote ul:first-child {
  margin-top: 0 !important
}

.snote blockquote:last-child,
.snote img:last-child,
.snote ol:last-child,
.snote p:last-child,
.snote pre:last-child,
.snote table:last-child,
.snote ul:last-child {
  margin-bottom: 0 !important
}

.snote:not(.no-icon) {
  padding-left: 45px
}

.snote:not(.no-icon)::before {
  position: absolute;
  top: 13px;
  left: 15px;
  font-size: larger;
  font-weight: 600;
  font-family: "Font Awesome 5 Free"
}

.snote.default {
  background-color: #f7f7f7;
  border-left-color: #777
}

.snote.default h2,
.snote.default h3,
.snote.default h4,
.snote.default h5,
.snote.default h6 {
  color: #777
}

.snote.default:not(.no-icon)::before {
  content: "\f0a9";
  color: #777
}

.snote.primary {
  background-color: #f5f0fa;
  border-left-color: #6f42c1
}

.snote.primary h2,
.snote.primary h3,
.snote.primary h4,
.snote.primary h5,
.snote.primary h6 {
  color: #6f42c1
}

.snote.primary:not(.no-icon)::before {
  content: "\f055";
  color: #6f42c1
}

.snote.info {
  background-color: #eef7fa;
  border-left-color: #428bca
}

.snote.info h2,
.snote.info h3,
.snote.info h4,
.snote.info h5,
.snote.info h6 {
  color: #428bca
}

.snote.info:not(.no-icon)::before {
  content: "\f05a";
  color: #428bca
}

.snote.success {
  background-color: #eff8f0;
  border-left-color: #5cb85c
}

.snote.success h2,
.snote.success h3,
.snote.success h4,
.snote.success h5,
.snote.success h6 {
  color: #5cb85c
}

.snote.success:not(.no-icon)::before {
  content: "\f058";
  color: #5cb85c
}

.snote.warning {
  background-color: #fdf8ea;
  border-left-color: #f0ad4e
}

.snote.warning h2,
.snote.warning h3,
.snote.warning h4,
.snote.warning h5,
.snote.warning h6 {
  color: #f0ad4e
}

.snote.warning:not(.no-icon)::before {
  content: "\f06a";
  color: #f0ad4e
}

.snote.danger {
  background-color: #fcf1f2;
  border-left-color: #d9534f
}

.snote.danger h2,
.snote.danger h3,
.snote.danger h4,
.snote.danger h5,
.snote.danger h6 {
  color: #d9534f
}

.snote.danger:not(.no-icon)::before {
  content: "\f056";
  color: #d9534f
}

div.snote {
  position: relative;
  margin-top: .5rem;
  margin-bottom: .5rem;
  padding: .6rem 16px .5rem 16px;
  padding-left: -webkit-calc(16px + 16px);
  padding-left: calc(16px + 16px);
  border-radius: 4px;
  background: #f6f6f6;
  border-left: 4px solid #767676
}

div.snote h2,
div.snote h3,
div.snote h4,
div.snote h5,
div.snote h6 {
  margin-top: 3px;
  margin-bottom: 0;
  padding-top: 0 !important;
  border-bottom: initial
}

div.snote blockquote,
div.snote img,
div.snote ol,
div.snote p,
div.snote ul {
  font-size: 14px;
  margin-top: .5rem;
  margin-bottom: .5rem
}

div.snote::before {
  position: absolute;
  top: -webkit-calc(50% - 24px * .5);
  top: calc(50% - 24px * .5);
  left: 4px;
  width: 24px;
  height: 24px;
  text-align: center;
  font-weight: 600;
  line-height: 24px;
  vertical-align: middle;
  font-family: "Font Awesome 5 Free"
}

div.snote::before {
  color: #767676;
  content: "\f054"
}

div.snote::before {
  content: "\f054"
}

div.snote.quote {
  background: #e8f4fd;
  border-color: #2196f3
}

div.snote.quote::before {
  color: #2196f3;
  content: "\f10d"
}

div.snote.info {
  background: #e8f4fd;
  border-color: #2196f3
}

div.snote.info::before {
  color: #2196f3;
  content: "\f129"
}

div.snote.done,
div.snote.success {
  background: #ebf9ed;
  border-color: #3dc550
}

div.snote.done::before,
div.snote.success::before {
  color: #3dc550;
  content: "\f00c"
}

div.snote.warning {
  background: #fff8e9;
  border-color: #ffbd2b
}

div.snote.warning::before {
  color: #ffbd2b;
  content: "\f12a"
}

div.snote.danger,
div.snote.error {
  background: #feefee;
  border-color: #fe5f58
}

div.snote.danger::before,
div.snote.error::before {
  color: #fe5f58;
  content: "\f00d"
}

div.snote.radiation::before {
  content: "\f7b9"
}

div.snote.bug::before {
  content: "\f188"
}

div.snote.idea::before {
  content: "\f0eb"
}

div.snote.link::before {
  content: "\f0c1"
}

div.snote.paperclip::before {
  content: "\f0c6"
}

div.snote.todo::before {
  content: "\f0ae"
}

div.snote.message::before {
  content: "\f4ad"
}

div.snote.guide::before {
  content: "\f277"
}

div.snote.download::before {
  content: "\f019"
}

div.snote.up::before {
  content: "\f102"
}

div.snote.undo::before {
  content: "\f2ea"
}

div.snote.play::before {
  content: "\f144"
}

div.snote.clear {
  background: 0 0;
  border-color: none
}

div.snote.light {
  background: #f6f6f6;
  border-color: #aaa
}

div.snote.light::before {
  color: #aaa
}

div.snote.gray {
  background: #f6f6f6;
  border-color: #767676
}

div.snote.gray::before {
  color: #767676
}

div.snote.red {
  background: #feefee;
  border-color: #fe5f58
}

div.snote.red::before {
  color: #fe5f58
}

div.snote.yellow {
  background: #fff8e9;
  border-color: #ffbd2b
}

div.snote.yellow::before {
  color: #ffbd2b
}

div.snote.green {
  background: #ebf9ed;
  border-color: #3dc550
}

div.snote.green::before {
  color: #3dc550
}

div.snote.cyan {
  background: #e8fafe;
  border-color: #1bcdfc
}

div.snote.cyan::before {
  color: #1bcdfc
}

div.snote.blue {
  background: #e8f4fd;
  border-color: #2196f3
}

div.snote.blue::before {
  color: #2196f3
}

.tip {
  position: relative;
  color: #fff;
  background: #20a0ff;
  background: -o-linear-gradient(left, #20a0ff, #20b8ff);
  background: -webkit-gradient(linear, left top, right top, from(#20a0ff), to(#20b8ff));
  background: linear-gradient(90deg, #20a0ff, #20b8ff);
  padding: 6px 20px;
  border-radius: 10px;
  -webkit-box-shadow: 0 3px 5px rgba(32, 160, 255, .5);
  box-shadow: 0 3px 5px rgba(32, 160, 255, .5);
  margin-bottom: 20px
}

.tip p {
  margin: 5px 0 !important
}

.tip.custom {
  display: block;
  width: 100%
}

.tip:before {
  background: #20a0ff;
  background: -o-linear-gradient(bottom, #0092ff, #20b8ff);
  background: -webkit-gradient(linear, left bottom, left top, from(#0092ff), to(#20b8ff));
  background: linear-gradient(0deg, #0092ff, #20b8ff);
  border-radius: 50%;
  color: #fff;
  font-size: 12px;
  position: absolute;
  width: 24px;
  height: 24px;
  line-height: 24.5px;
  left: -12px;
  top: -12px;
  -webkit-box-shadow: 0 0 0 2.5px #fff;
  box-shadow: 0 0 0 2.5px #fff;
  font-weight: 600;
  text-align: center
}

.tip.info {
  font-family: "Font Awesome 5 Free"
}

.tip.info::before {
  content: "\f129"
}

.btn,
.getit a {
  position: relative
}

.well .tip:before {
  -webkit-box-shadow: 0 0 0 2.5px #f7f8f9;
  box-shadow: 0 0 0 2.5px #f7f8f9
}

.tip ol {
  margin: 0
}

.tip.success {
  background: #61be33;
  background: -webkit-gradient(linear, left top, right top, from(#61be33), to(#8fce44));
  font-family: "Font Awesome 5 Free";
  background: -o-linear-gradient(left, #61be33, #8fce44);
  background: linear-gradient(90deg, #61be33, #8fce44);
  text-shadow: 0 -1px #61be33;
  -webkit-box-shadow: 0 3px 5px rgba(104, 195, 59, .5);
  box-shadow: 0 3px 5px rgba(104, 195, 59, .5)
}

.tip.success:before {
  background: -o-linear-gradient(bottom, #52bb1d, #95d34b);
  background: -webkit-gradient(linear, left bottom, left top, from(#52bb1d), to(#95d34b));
  background: linear-gradient(0deg, #52bb1d, #95d34b);
  content: "\f00c";
  text-shadow: 0 -1px #61be33
}

.tip.warning {
  background: #ff953f;
  background: -webkit-gradient(linear, left top, right top, from(#ff953f), to(#ffb449));
  font-family: "Font Awesome 5 Free";
  background: -o-linear-gradient(left, #ff953f, #ffb449);
  background: linear-gradient(90deg, #ff953f, #ffb449);
  text-shadow: 0 -1px #ff953f;
  -webkit-box-shadow: 0 3px 5px rgba(255, 154, 73, .5);
  box-shadow: 0 3px 5px rgba(255, 154, 73, .5)
}

.tip.warning:before {
  background: -o-linear-gradient(bottom, #ff8f35, #ffc149);
  background: -webkit-gradient(linear, left bottom, left top, from(#ff8f35), to(#ffc149));
  background: linear-gradient(0deg, #ff8f35, #ffc149);
  content: "\f12a";
  text-shadow: 0 -1px #ff953f
}

.tip.error {
  background: #ff4949;
  background: -webkit-gradient(linear, left top, right top, from(#ff4949), to(#ff7849));
  font-family: "Font Awesome 5 Free";
  background: -o-linear-gradient(left, #ff4949, #ff7849);
  background: linear-gradient(90deg, #ff4949, #ff7849);
  text-shadow: 0 -1px #ff4949;
  -webkit-box-shadow: 0 3px 5px rgba(255, 73, 73, .5);
  box-shadow: 0 3px 5px rgba(255, 73, 73, .5)
}

.tip.error:before {
  background: -o-linear-gradient(bottom, #ff3838, #ff7849);
  background: -webkit-gradient(linear, left bottom, left top, from(#ff3838), to(#ff7849));
  background: linear-gradient(0deg, #ff3838, #ff7849);
  content: "\f00d";
  text-shadow: 0 -1px #ff4949
}

.tip.wtgo {
  background: -o-linear-gradient(280deg, #78ca33, #25822c);
  background: linear-gradient(530deg, #78ca33, #25822c);
  text-shadow: 0 -1px #4cf706
}

.tip.wtgo::before {
  background: -o-linear-gradient(34deg, #78ca33, #25822c);
  background: linear-gradient(776deg, #78ca33, #25822c);
  text-shadow: 0 -1px #4cf706
}

.tip.ban {
  background: #ff4949;
  background: -o-linear-gradient(left, #ff4949, #f03b49);
  background: -webkit-gradient(linear, left top, right top, from(#ff4949), to(#f03b49));
  background: linear-gradient(90deg, #ff4949, #f03b49);
  text-shadow: 0 -1px #ff4949;
  -webkit-box-shadow: 0 3px 5px rgba(255, 73, 73, .5);
  box-shadow: 0 3px 5px rgba(255, 73, 73, .5)
}

.tip.ban:before {
  background: -o-linear-gradient(bottom, #ff3838, #ff1022);
  background: -webkit-gradient(linear, left bottom, left top, from(#ff3838), to(#ff1022));
  background: linear-gradient(0deg, #ff3838, #ff1022);
  text-shadow: 0 -1px #ff4949
}

.tip.home {
  background: #15e5ff;
  background: -o-linear-gradient(left, #0ec0ef, #80e0f7);
  background: -webkit-gradient(linear, left top, right top, from(#0ec0ef), to(#80e0f7));
  background: linear-gradient(90deg, #0ec0ef, #80e0f7);
  text-shadow: 0 -1px #0ec0ef;
  -webkit-box-shadow: 0 3px 5px #01caff;
  box-shadow: 0 3px 5px #01caff
}

.tip.home:before {
  background: -o-linear-gradient(bottom, #0ec0ee, #0ec0ea);
  background: -webkit-gradient(linear, left bottom, left top, from(#0ec0ee), to(#0ec0ea));
  background: linear-gradient(0deg, #0ec0ee, #0ec0ea);
  text-shadow: 0 -1px #0ec0ea
}

.tip.important {
  background: #f3a700;
  background: -o-linear-gradient(160deg, #ef6e6e, #ffb000);
  background: linear-gradient(290deg, #ef6e6e, #ffb000);
  text-shadow: 0 -1px #a97a12;
  -webkit-box-shadow: 0 3px 5px #ffb000;
  box-shadow: 0 3px 5px #ffb000
}

.tip.important:before {
  background: -o-linear-gradient(right, #ffbd2b, #f5626d);
  background: -webkit-gradient(linear, right top, left top, from(#ffbd2b), to(#f5626d));
  background: linear-gradient(270deg, #ffbd2b, #f5626d);
  text-shadow: 0 -1px #ffbd2b
}

.tip.ref {
  background: #00a9ff;
  background: -o-linear-gradient(220deg, #47c0e0, #2dc342);
  background: linear-gradient(230deg, #47c0e0, #2dc342);
  text-shadow: 0 -1px #1bcdfc;
  -webkit-box-shadow: 0 3px 5px #1bcdfc;
  box-shadow: 0 3px 5px #20b1ad
}

.tip.ref:before {
  background: -o-linear-gradient(right, #40c0e2, #3dc550);
  background: -webkit-gradient(linear, right top, left top, from(#40c0e2), to(#3dc550));
  background: linear-gradient(270deg, #40c0e2, #3dc550);
  text-shadow: 0 -1px #17cfff
}

.tip.ffa {
  background: #1502ff;
  background: -o-linear-gradient(220deg, #40c0e2, #5247e2);
  background: linear-gradient(230deg, #40c0e2, #5247e2);
  text-shadow: 0 -1px #8278fd;
  -webkit-box-shadow: 0 3px 5px #4037a7;
  box-shadow: 1 3px 5px #5e52ec
}

.tip.ffa:before {
  background: -o-linear-gradient(250deg, #40c0e2, #5246e2);
  background: linear-gradient(560deg, #40c0e2, #5246e2);
  text-shadow: 0 -1px #098cf5
}

.tip.key {
  background: #25c33b;
  background: -o-linear-gradient(220deg, #90a4ae, #b7a7a7);
  background: linear-gradient(230deg, #90a4ae, #b7a7a7);
  text-shadow: 0 -1px #c1c0d4;
  -webkit-box-shadow: 0 3px 5px #d3d2de;
  box-shadow: 1 3px 5px #d5d4de
}

.tip.key:before {
  background: -o-linear-gradient(250deg, #bccdd2, #cfced4);
  background: linear-gradient(560deg, #bccdd2, #cfced4);
  text-shadow: 0 -1px #a9b2b9
}

.tip.socd {
  background: #25c33b;
  background: -o-linear-gradient(220deg, #ffaa0d, #deb455);
  background: linear-gradient(230deg, #ffaa0d, #deb455);
  text-shadow: 0 -1px #c1c0d4;
  -webkit-box-shadow: 0 3px 5px #d3d2de;
  box-shadow: 1 3px 5px #d5d4de
}

.tip.socd:before {
  background: -o-linear-gradient(250deg, #f9ae07, #ffb615);
  background: linear-gradient(560deg, #f9ae07, #ffb615);
  text-shadow: 0 -1px #ffb81b
}

.tip.qq {
  background: #25c33b;
  background: -o-linear-gradient(220deg, #20b8ff, #20b8ff);
  background: linear-gradient(230deg, #20b8ff, #20b8ff);
  text-shadow: 0 -1px #c1c0d4;
  -webkit-box-shadow: 0 3px 5px #d3d2de;
  box-shadow: 1 3px 5px #d5d4de
}

.tip.qq:before {
  background: -o-linear-gradient(250deg, #20b8ff, #20b8ff);
  background: linear-gradient(560deg, #20b8ff, #20b8ff);
  text-shadow: 0 -1px #20b8ff
}

#article-container figure.highlight .highlight-tools .code-expand+.code-lang {
  display: none;
  font-family: MyFont
}

#article-container figure.highlight:hover .highlight-tools .code-expand+.code-lang {
  display: block
}

#article-container figure.highlight .highlight-tools .code-expand.code-closed+.code-lang {
  display: block
}

#article-container figure.highlight .highlight-tools .code-lang {
  left: 50% !important;
  -webkit-transform: translateX(-50%);
      -ms-transform: translateX(-50%);
          transform: translateX(-50%)
}

#article-container figure.highlight .highlight-tools:after {
  width: 10px;
  height: 10px
}

#article-container figure.highlight .highlight-tools .code-lang {
  font-size: .7rem
}

#article-container figure.highlight .highlight-tools {
  color: #a9a9a9;
  background: #eee
}

[data-theme=dark] .highlight pre .comment {
  color: rgba(255, 255, 255, .5)
}

.highlight pre .marked {
  background-color: rgba(254, 213, 66, .4);
  padding: 2px 8px 2px 0;
  border-radius: 2px;
  width: 100%
}

.highlight pre .attr,
.highlight pre .attribute,
.highlight pre .title {
  color: #3f51b5
}

.highlight pre .comment {
  color: rgba(85, 85, 85, .5)
}

.highlight pre .javascript .function,
.highlight pre .keyword,
.highlight pre .meta-keyword {
  color: #9c27b0
}

.highlight pre .built_in,
.highlight pre .tag .name,
.highlight pre .type {
  color: #4ba7ee
}

.highlight pre .regexp,
.highlight pre .variable,
.highlight.css pre .class,
.highlight.css pre .id,
.highlight.css pre .pseudo,
.highlight.html pre .doctype,
.highlight.ruby pre .constant,
.highlight.xml pre .doctype,
.highlight.xml pre .pi,
.highlight.xml pre .tag .title {
  color: #fd8607
}

.highlight pre .constant,
.highlight pre .literal,
.highlight pre .number,
.highlight pre .preprocessor {
  color: #fd8607
}

.highlight pre .class,
.highlight.css pre .rules .attribute,
.highlight.ruby pre .class .title {
  color: #ff9800
}

.highlight pre .meta-string,
.highlight pre .string {
  color: #449e48
}

.highlight pre .header,
.highlight pre .inheritance,
.highlight pre .value,
.highlight.ruby pre .symbol,
.highlight.xml pre .cdata {
  color: #4caf50
}

.highlight.css pre .hexcolor {
  color: #6cc
}

.highlight pre .function,
.highlight.coffeescript pre .title,
.highlight.javascript pre .title,
.highlight.perl pre .sub,
.highlight.python pre .decorator,
.highlight.python pre .title,
.highlight.ruby pre .function .title,
.highlight.ruby pre .title .keyword {
  color: #69c
}

.highlight.css .line .selector-tag,
.highlight.css .line .tag .name,
.highlight.html .line .selector-tag,
.highlight.html .line .tag .name,
.highlight.less .line .selector-tag,
.highlight.less .line .tag .name,
.highlight.stylus .line .selector-tag,
.highlight.stylus .line .tag .name {
  color: #ee2b29
}

.highlight.css .line .selector-attr,
.highlight.css .line .selector-class,
.highlight.html .line .selector-attr,
.highlight.html .line .selector-class,
.highlight.less .line .selector-attr,
.highlight.less .line .selector-class,
.highlight.stylus .line .selector-attr,
.highlight.stylus .line .selector-class {
  color: #fd8607
}

.highlight.css .line .attribute,
.highlight.html .line .attribute,
.highlight.less .line .attribute,
.highlight.stylus .line .attribute {
  color: #3f51b5
}

.highlight.css .line .number,
.highlight.html .line .number,
.highlight.less .line .number,
.highlight.stylus .line .number {
  color: #17afca
}

.highlight.c .line .meta,
.highlight.objc .line .meta,
.highlight.objectivec .line .meta,
.highlight.swift .line .meta {
  color: #9c27b0
}

.highlight.c .line .meta-string,
.highlight.c .line .string,
.highlight.objc .line .meta-string,
.highlight.objc .line .string,
.highlight.objectivec .line .meta-string,
.highlight.objectivec .line .string,
.highlight.swift .line .meta-string,
.highlight.swift .line .string {
  color: #fb3f1b
}

.highlight.c .line .class,
.highlight.objc .line .class,
.highlight.objectivec .line .class,
.highlight.swift .line .class {
  color: rgba(85, 85, 85, .9)
}

.highlight.c .line .class .title,
.highlight.objc .line .class .title,
.highlight.objectivec .line .class .title,
.highlight.swift .line .class .title {
  color: #1e80f0
}

.highlight.c .line .comment,
.highlight.css .line .selector-pseudo,
.highlight.objc .line .comment,
.highlight.objectivec .line .comment,
.highlight.swift .line .comment {
  color: #3fa33f
}

.highlight.json .line .attr {
  color: #e24f5a
}

.highlight.json .line .literal {
  color: #3f51b5
}

.highlight.yaml .line .attr {
  color: #e24f5a
}

@font-face {
  font-family: MyFont;
  src: url(https://cdn.jsdelivr.net/gh/sviptzk/StaticFile_HEXO@master/butterfly/font/woff2/JetBrainsMono-Medium.woff2)
}

#article-container code,
#article-container pre {
  font-family: MyFont !important
}

@-webkit-keyframes elastic {
  0% {
    -webkit-transform: scale(0);
            transform: scale(0)
  }

  55% {
    -webkit-transform: scale(1);
            transform: scale(1)
  }

  70% {
    -webkit-transform: scale(.98);
            transform: scale(.98)
  }

  100% {
    -webkit-transform: scale(1);
            transform: scale(1)
  }
}

@keyframes elastic {
  0% {
    -webkit-transform: scale(0);
            transform: scale(0)
  }

  55% {
    -webkit-transform: scale(1);
            transform: scale(1)
  }

  70% {
    -webkit-transform: scale(.98);
            transform: scale(.98)
  }

  100% {
    -webkit-transform: scale(1);
            transform: scale(1)
  }
}

.code-block-fullscreen {
  position: fixed !important;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  min-width: 100%;
  z-index: 9999999;
  margin: 0 !important;
  -webkit-animation: elastic 1s;
          animation: elastic 1s
}

#article-container figure.highlight .highlight-tools .fullScreen {
  position: absolute;
  top: .4rem;
  left: 2.6rem;
  cursor: pointer;
  -webkit-transition: color .2s;
  -o-transition: color .2s;
  transition: color .2s;
  opacity: 0;
  cursor: url(https://cdn.jsdelivr.net/gh/sviptzk/HexoStaticFile@latest/Hexo/img/pointer.cur)
}

#article-container figure.highlight .highlight-tools .fullScreen:hover {
  color: #49b1f5
}

.aplayer .aplayer-lrc p {
  font-size: 12px;
  font-weight: 700;
  line-height: 16px !important
}

.aplayer .aplayer-lrc p.aplayer-lrc-current {
  font-size: 15px;
  color: #49b1f5
}

.aplayer.aplayer-fixed.aplayer-narrow .aplayer-body {
  left: -66px !important
}

.aplayer.aplayer-fixed.aplayer-narrow .aplayer-body:hover {
  left: 0 !important
}

[data-theme=dark].is-container .is-issue-content {
  -webkit-box-shadow: 0 .25em .75em 0 #eaeaea;
          box-shadow: 0 .25em .75em 0 #eaeaea
}

[data-theme=dark] #article-container code {
  background: 0 0
}

.is-container {
  font-size: 1em;
  -webkit-box-sizing: border-box;
          box-sizing: border-box
}

#article-container .is-container img {
  max-width: 100%;
  margin: 0
}

.is-container * {
  -webkit-box-sizing: border-box;
          box-sizing: border-box
}

.is-container:after {
  content: "";
  position: fixed;
  bottom: 100%;
  left: 0;
  right: 0;
  top: 0;
  opacity: 0
}

.is-container .is-error {
  text-align: center;
  margin: .625em;
  margin-top: 2em;
  color: #ff3860
}

.is-container .is-initing {
  padding: 1.25em 0;
  text-align: center
}

.is-container .is-initing-text {
  margin: .625em auto;
  color: #999
}

.is-container .is-issues {
  padding-top: 1.25em
}

.is-container .is-issues-null {
  text-align: center
}

.is-container .is-issues-controls {
  margin: 1.25em 0;
  text-align: center
}

.is-container .is-issue {
  position: relative;
  padding: .625em 0;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex
}

.is-container .is-issue-content {
  -webkit-box-flex: 1;
  -webkit-flex: 1 1;
      -ms-flex: 1 1;
          flex: 1 1;
  padding: 1em 1.5em;
  overflow: auto;
  -webkit-transition: all .25s ease;
  -o-transition: all .25s ease;
  transition: all .25s ease;
  border-radius: 10px;
  background: var(--card-bg);
  -webkit-box-shadow: 0 .625em 3.75em 0 #eaeaea;
          box-shadow: 0 .625em 3.75em 0 #eaeaea;
  -webkit-transition: all .25s ease .2s, -webkit-transform .5s cubic-bezier(.6, .2, .1, 1) .2s;
  transition: all .25s ease .2s, -webkit-transform .5s cubic-bezier(.6, .2, .1, 1) .2s;
  -o-transition: all .25s ease .2s, transform .5s cubic-bezier(.6, .2, .1, 1) .2s;
  transition: all .25s ease .2s, transform .5s cubic-bezier(.6, .2, .1, 1) .2s;
  transition: all .25s ease .2s, transform .5s cubic-bezier(.6, .2, .1, 1) .2s, -webkit-transform .5s cubic-bezier(.6, .2, .1, 1) .2s
}

.is-container .is-issue-content:hover {
  -webkit-box-shadow: 0 1em 4em .5em #d7d7d7;
          box-shadow: 0 1em 4em .5em #d7d7d7;
  -webkit-transform: translateY(-3px);
      -ms-transform: translateY(-3px);
          transform: translateY(-3px)
}

.is-container .is-issue-header {
  margin-bottom: .5em;
  font-size: 1em;
  position: relative
}

.is-container .is-issue-header a {
  text-decoration: none
}

.is-container .is-issue-block-1 {
  float: right;
  height: 1.375em;
  width: 2em
}

.is-container .is-issue-block-2 {
  float: right;
  height: 1.375em;
  width: 4em
}

.is-container .is-issue-username {
  font-weight: 600;
  font-size: 1.1em;
  color: var(--font-color);
  text-decoration: none
}

.is-container .is-issue-text {
  margin: auto .3em;
  font-weight: 600
}

.is-container .is-issue-date,
.is-container .is-issue-text {
  color: #a1a1a1;
  text-shadow: #d9d9d9 0 0 1px, #fffffb 0 0 1px, #fffffb 0 0 2px
}

.is-container .is-issue-body {
  color: var(--font-color)
}

.is-container .markdown-body {
  font-size: 1em;
  letter-spacing: 1px
}

.is-container .markdown-body ol {
  list-style: decimal !important
}

.is-container .markdown-body ul {
  list-style: circle !important
}

.is-container .is-issue-label {
  line-height: 1;
  padding: 5px 6px;
  font-size: .9em;
  font-weight: 600;
  border-radius: 3px;
  -webkit-box-shadow: inset 0 -1px 0 rgba(27, 31, 35, .12);
          box-shadow: inset 0 -1px 0 rgba(27, 31, 35, .12)
}

.is-container .is-issue-label:not(:first-child) {
  margin-left: 5px
}

.is-container .is-icon {
  width: 1em;
  height: 1em;
  vertical-align: -.15em;
  fill: currentColor;
  overflow: hidden;
  margin-right: .2em;
  font-size: 1.35em;
  -webkit-transform: translateY(2px);
      -ms-transform: translateY(2px);
          transform: translateY(2px)
}

.is-container .is-verified-badge {
  margin-left: .2em;
  display: inline-block;
  -webkit-transform: translateY(3px);
      -ms-transform: translateY(3px);
          transform: translateY(3px)
}

.is-container .is-issue-footer {
  position: relative;
  margin-top: 1em;
  font-size: 1.1em;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none
}

.is-container .is-issue-icon {
  margin-right: 2em;
  text-decoration: none;
  color: #666;
  border: none;
  outline: 0;
  cursor: pointer
}

.is-container .is-issue-icon * {
  -webkit-transition: all .3s ease;
  -o-transition: all .3s ease;
  transition: all .3s ease
}

.is-container .is-icon-comment-wrap,
.is-container .is-icon-reaction-wrap {
  display: inline-block;
  border-radius: 50%;
  -webkit-transition: all .5s ease-in-out;
  -o-transition: all .5s ease-in-out;
  transition: all .5s ease-in-out;
  border: none;
  outline: 0;
  padding: 2px
}

.is-container .is-icon-reaction-wrap {
  position: relative;
  -webkit-transition: all .4s ease-out;
  -o-transition: all .4s ease-out;
  transition: all .4s ease-out
}

.is-container .is-icon-reaction-wrap:before {
  content: "â¤";
  color: #e02460;
  position: absolute;
  top: 1px;
  left: 5px;
  opacity: 0
}

@-webkit-keyframes heart-bump {
  .is-container 0% {
    opacity: .2
  }

  .is-container 30% {
    opacity: .5;
    -webkit-transform: rotate(20deg);
            transform: rotate(20deg)
  }

  .is-container 60% {
    opacity: .7;
    -webkit-transform: rotate(-20deg);
            transform: rotate(-20deg)
  }

  .is-container 100% {
    opacity: 0;
    top: -30px;
    -webkit-transform: rotate(0);
            transform: rotate(0)
  }
}

@keyframes heart-bump {
  .is-container 0% {
    opacity: .2
  }

  .is-container 30% {
    opacity: .5;
    -webkit-transform: rotate(20deg);
            transform: rotate(20deg)
  }

  .is-container 60% {
    opacity: .7;
    -webkit-transform: rotate(-20deg);
            transform: rotate(-20deg)
  }

  .is-container 100% {
    opacity: 0;
    top: -30px;
    -webkit-transform: rotate(0);
            transform: rotate(0)
  }
}

.is-container .is-issue-reaction:hover .is-icon-reaction-wrap {
  -webkit-box-shadow: 0 0 20px 5px #e024603f;
          box-shadow: 0 0 20px 5px #e024603f;
  background: #e0246026
}

.is-container .is-issue-reaction:hover .is-reaction-count {
  color: #e02460
}

.is-container .is-comment-count,
.is-container .is-reaction-count {
  font-weight: 600;
  display: inline-block
}

.is-container .is-issue-comment:hover .is-icon-comment-wrap {
  -webkit-box-shadow: 0 0 20px 5px #1d68f23b;
          box-shadow: 0 0 20px 5px #1d68f23b;
  background: #1da0f22b
}

.is-container .is-issue-comment:hover .is-comment-count {
  color: #1da0f2
}

.is-container .is-badge {
  height: 1em;
  width: 1em
}

@-webkit-keyframes bounce {
  .is-container 0% {
    -webkit-transform: scale(1);
            transform: scale(1)
  }

  .is-container 33% {
    -webkit-transform: scale(.8);
            transform: scale(.8)
  }

  .is-container 66% {
    -webkit-transform: scale(1.2);
            transform: scale(1.2)
  }

  .is-container 100% {
    -webkit-transform: scale(1);
            transform: scale(1)
  }
}

@keyframes bounce {
  .is-container 0% {
    -webkit-transform: scale(1);
            transform: scale(1)
  }

  .is-container 33% {
    -webkit-transform: scale(.8);
            transform: scale(.8)
  }

  .is-container 66% {
    -webkit-transform: scale(1.2);
            transform: scale(1.2)
  }

  .is-container 100% {
    -webkit-transform: scale(1);
            transform: scale(1)
  }
}

@-webkit-keyframes fade {
  .is-container 10% {
    opacity: 0
  }

  .is-container 33% {
    -webkit-transform: scale(.8);
            transform: scale(.8)
  }

  .is-container 66% {
    -webkit-transform: scale(1.2);
            transform: scale(1.2)
  }

  .is-container 100% {
    -webkit-transform: scale(1);
            transform: scale(1);
    opacity: .8;
    color: #e02460
  }
}

@keyframes fade {
  .is-container 10% {
    opacity: 0
  }

  .is-container 33% {
    -webkit-transform: scale(.8);
            transform: scale(.8)
  }

  .is-container 66% {
    -webkit-transform: scale(1.2);
            transform: scale(1.2)
  }

  .is-container 100% {
    -webkit-transform: scale(1);
            transform: scale(1);
    opacity: .8;
    color: #e02460
  }
}

@-webkit-keyframes linear {
  .is-container 0% {
    -webkit-box-shadow: 0 0 20px 5px #e024603f;
            box-shadow: 0 0 20px 5px #e024603f;
    background: #e0246026
  }

  .is-container 100% {
    -webkit-box-shadow: 0 0 20px 2px #f3c5b385;
            box-shadow: 0 0 20px 2px #f3c5b385;
    background: #f3c5b342
  }
}

@keyframes linear {
  .is-container 0% {
    -webkit-box-shadow: 0 0 20px 5px #e024603f;
            box-shadow: 0 0 20px 5px #e024603f;
    background: #e0246026
  }

  .is-container 100% {
    -webkit-box-shadow: 0 0 20px 2px #f3c5b385;
            box-shadow: 0 0 20px 2px #f3c5b385;
    background: #f3c5b342
  }
}

.is-container .is-issue-liked {
  -webkit-box-shadow: 0 0 20px 2px #f3c5b385;
          box-shadow: 0 0 20px 2px #f3c5b385;
  background: #f3c5b342
}

.is-container .is-issue-liked .is-reaction-count {
  opacity: .8;
  color: #e02460
}

.is-container .is-issue-like-animation {
  -webkit-animation: shadows .3s linear;
          animation: shadows .3s linear
}

.is-container .is-issue-like-animation .is-reaction-count {
  -webkit-animation: fade .3s;
          animation: fade .3s
}

.is-container .is-issue-like-animation .is-icon-reaction-wrap {
  -webkit-animation: bounce .3s;
          animation: bounce .3s
}

.is-container .is-issue-like-animation .is-icon-reaction-wrap:before {
  -webkit-animation: heart-bump .8s;
          animation: heart-bump .8s
}

@-webkit-keyframes wobble-horizontal {
  .is-container 16.65% {
    -webkit-transform: translateX(8px);
            transform: translateX(8px)
  }

  .is-container 33.3% {
    -webkit-transform: translateX(-6px);
            transform: translateX(-6px)
  }

  .is-container 49.95% {
    -webkit-transform: translateX(4px);
            transform: translateX(4px)
  }

  .is-container 66.6% {
    -webkit-transform: translateX(-2px);
            transform: translateX(-2px)
  }

  .is-container 83.25% {
    -webkit-transform: translateX(1px);
            transform: translateX(1px)
  }

  .is-container 100% {
    -webkit-transform: translateX(0);
            transform: translateX(0)
  }
}

@keyframes wobble-horizontal {
  .is-container 16.65% {
    -webkit-transform: translateX(8px);
            transform: translateX(8px)
  }

  .is-container 33.3% {
    -webkit-transform: translateX(-6px);
            transform: translateX(-6px)
  }

  .is-container 49.95% {
    -webkit-transform: translateX(4px);
            transform: translateX(4px)
  }

  .is-container 66.6% {
    -webkit-transform: translateX(-2px);
            transform: translateX(-2px)
  }

  .is-container 83.25% {
    -webkit-transform: translateX(1px);
            transform: translateX(1px)
  }

  .is-container 100% {
    -webkit-transform: translateX(0);
            transform: translateX(0)
  }
}

.is-container .wobble-horizontal {
  -webkit-transform: translateZ(0);
          transform: translateZ(0);
  -webkit-box-shadow: 0 0 1px transparent;
          box-shadow: 0 0 1px transparent
}

.is-container .wobble-horizontal:hover {
  -webkit-animation-name: wobble-horizontal;
          animation-name: wobble-horizontal;
  -webkit-animation-duration: 1s;
          animation-duration: 1s;
  -webkit-animation-timing-function: ease-in-out;
          animation-timing-function: ease-in-out;
  -webkit-animation-iteration-count: 1;
          animation-iteration-count: 1;
  -webkit-transition: background 1s;
  -o-transition: background 1s;
  transition: background 1s;
  background: #def2eb
}

.is-container .is-icon-back {
  padding: .5em;
  border-radius: .5em;
  border: none;
  outline: 0;
  background: #f9f9f9;
  -webkit-transition: all .2s;
  -o-transition: all .2s;
  transition: all .2s;
  display: block;
  width: 120px;
  text-align: center;
  margin: 0 auto
}

.is-container .is-icon-back .is-back-text {
  color: #999;
  opacity: .8;
  font-size: .8 .5em
}

.is-container .is-issue-end {
  margin-top: 3em;
  font-size: 2em;
  line-height: 1.1em;
  outline: 0;
  width: 20em;
  color: #fff;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  text-align: center;
  -webkit-transform: rotate(-10deg) skewX(20deg);
      -ms-transform: rotate(-10deg) skewX(20deg);
          transform: rotate(-10deg) skewX(20deg);
  text-shadow: -1px 1px #cacaca, -2px 2px #cacaca, -3px 3px #cacaca, -4px 4px #cacaca, -5px 5px #cacaca, -6px 6px #cacaca, -7px 7px #cacaca, -8px 8px #cacaca, -9px 9px #cacaca, -10px 10px #cacaca, -11px 11px #cacaca, -12px 12px #cacaca, -20px 20px #f0f0f0
}

.is-container .is-end-button {
  text-align: center;
  display: block;
  margin: 2em auto 0
}

.is-container .is-end-button-text {
  font-size: 1em;
  padding: .3em;
  line-height: 1.1em;
  outline: 0;
  text-align: center;
  color: #f70000;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none
}

@media (max-width:479px) {
  .is-container .is-issue-content {
    padding: .625em .75em
  }

  .is-container .is-issue-text {
    margin: auto .2em
  }

  .is-container .is-issue-end {
    display: none
  }
}

.square-loader {
  display: inline-block;
  width: 2em;
  height: 2em;
  position: relative;
  border: 4px solid #ccc;
  border-radius: 10%;
  -webkit-box-shadow: inset 0 0 20px 20px #ebebeb33;
          box-shadow: inset 0 0 20px 20px #ebebeb33;
  -webkit-animation: square 2s infinite ease;
          animation: square 2s infinite ease
}

.square-inner {
  vertical-align: top;
  display: inline-block;
  width: 100% !important;
  background-color: #ccc;
  -webkit-box-shadow: 0 0 5px 0 #ccc;
          box-shadow: 0 0 5px 0 #ccc;
  -webkit-animation: loader-inner 2s infinite ease-in;
          animation: loader-inner 2s infinite ease-in
}

@-webkit-keyframes square {
  0% {
    -webkit-transform: rotate(0);
            transform: rotate(0)
  }

  25% {
    -webkit-transform: rotate(180deg);
            transform: rotate(180deg)
  }

  50% {
    -webkit-transform: rotate(180deg);
            transform: rotate(180deg)
  }

  75% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg)
  }

  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg)
  }
}

@keyframes square {
  0% {
    -webkit-transform: rotate(0);
            transform: rotate(0)
  }

  25% {
    -webkit-transform: rotate(180deg);
            transform: rotate(180deg)
  }

  50% {
    -webkit-transform: rotate(180deg);
            transform: rotate(180deg)
  }

  75% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg)
  }

  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg)
  }
}

@-webkit-keyframes loader-inner {
  0% {
    height: 0%
  }

  25% {
    height: 0%
  }

  50% {
    height: 100%
  }

  75% {
    height: 100%
  }

  100% {
    height: 0%
  }
}

@keyframes loader-inner {
  0% {
    height: 0%
  }

  25% {
    height: 0%
  }

  50% {
    height: 100%
  }

  75% {
    height: 100%
  }

  100% {
    height: 0%
  }
}

.labels-label {
  margin: 6px;
  display: inline-block;
  line-height: 1;
  padding: 5px 6px;
  font-size: .9em;
  font-weight: 600;
  border-radius: 3px;
  -webkit-box-shadow: inset 0 -1px 0 rgba(27, 31, 35, .12);
          box-shadow: inset 0 -1px 0 rgba(27, 31, 35, .12)
}